<template>
    <div class="timePieceContent">
        <div class="timePieceTopBox">
            <div class="instrumentPanel">
                <div class="instrumentPanelItem">
                    <p class="instrumentPanelItemText">{{ formattedTime }}</p>
                </div>
            </div>
        </div>
        <div class="timePieceBottomBox">
            <div class="timePieceBottomBoxItem" :class="{ active: isActive1 }" @click="resetTimer">
                <span>重置</span>
            </div>
            <div class="timePieceBottomBoxItem" :class="{ active: isActive2 }" @click="stopTimer">
                <span>停止</span>
            </div>
        </div>
        <div class="timePieceBottomBox">
            <div class="timePieceBottomBoxItem bottomBtn" :class="{ active: isActive3 }" @click="startTimer">
                <span>开始</span>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'


const route = useRoute()
const router = useRouter()

const time = ref(0); // 存储秒表时间（单位：毫秒）
const intervalId = ref<any>(null); // 存储setInterval的ID，用于停止计时器
const isActive1 = ref<boolean>(false)
const isActive2 = ref<boolean>(false)
const isActive3 = ref<boolean>(false)

// 格式化时间显示为HH:MM:SS:mmm格式
const formattedTime = computed(() => {
    // const milliseconds = time.value % 1000;
    const milliseconds = time.value % 100;
    const seconds = Math.floor((time.value / 1000) % 60);
    const minutes = Math.floor((time.value / (1000 * 60)) % 60);
    const hours = Math.floor((time.value / (1000 * 60 * 60)) % 24);
    // return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(3, '0')}`;
    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
});

const handleClick = (type: string) => {
    if (type == '1') {
        isActive1.value = !isActive1.value
        setTimeout(() => {
            isActive1.value = !isActive1.value
        }, 100)
    } else if (type == '2') {
        isActive2.value = !isActive2.value
        setTimeout(() => {
            isActive2.value = !isActive2.value
        }, 100)
    } else if (type == '3') {
        isActive3.value = !isActive3.value
        setTimeout(() => {
            isActive3.value = !isActive3.value
        }, 100)
    }
}

// 开始计时
const startTimer = () => {
    handleClick('3')
    if (!intervalId.value) {
        intervalId.value = setInterval(() => {
        time.value += 10; // 每10毫秒增加1毫秒（为了简化，这里用的是10毫秒的间隔）
        }, 10); // 10毫秒间隔更新时间
    }
};

// 停止计时
const stopTimer = () => {
    handleClick('2')
    if (intervalId.value) {
        clearInterval(intervalId.value);
        intervalId.value = null;
    }
};

// 重置计时器
const resetTimer = () => {
    handleClick('1')
    stopTimer(); // 首先停止计时器
    time.value = 0; // 重置时间到0毫秒
};

onMounted(() => {
//   startTimer(); // 组件挂载后开始计时
});

// 组件卸载时清除计时器，防止内存泄漏
onUnmounted(() => {
  stopTimer(); // 组件卸载前停止计时器，防止内存泄漏
});

onMounted(() => {

})

</script>


<style lang="scss" scoped>
.timePieceContent {
    width: 100%;
    position: relative;
    padding: 15px;
    .timePieceTopBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        position: relative;
        .instrumentPanel {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #f0f0f0;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2),
            0 -10px 15px rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            .instrumentPanelItem {
                width: 80%;
                height: 30%;
                background-color: #f0f0f0;
                box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.2),
                inset 0 -10px 15px rgba(255, 255, 255, 0.6);
                display: flex;
                align-items: center;
                justify-content: center;
                .instrumentPanelItemText {
                    font-size: 30px;
                    color: #666;
                }
            }
        }
    }
    .timePieceBottomBox {
        width: 100%;
        margin-top: 25px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        .timePieceBottomBoxItem {
            width: 40%;
            height: 55px;
            border-radius: 16px;
            background-color: #f0f0f0;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2),
            0 -10px 15px rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            span {
                font-size: 16px;
                font-weight: 500;
                color: #666;
            }
            transition: all 0.3s ease; /* 过渡效果 */
        }
        .leftBtn {

        }
        .rightBtn {

        }
        .bottomBtn {
            width: 85%;
        }
        .active {
            // background-color: blue; /* 改变背景颜色 */
            transform: scale(1.5); /* 放大按钮 */
        }
    }
}
</style>